<template>
    <div>
        <div>
            <p>state</p>
            <p>a:{{ $store.state.mdA.a }}</p>
            <p>a:{{ a }}</p>
        </div>
        <br>
        <div>
            <p>getters</p>
            <p>doubleA:{{ $store.getters.doubleA }}</p>
            <p>doubleA:{{ doubleA }}</p>
        </div>
        <br>
        <div>
            <p>mutations</p>
            <p><button @click="$store.commit('addA')">addA</button></p>
            <p><button @click="addA">addA</button></p>
        </div>
        <br>
        <div>
            <p>mutations</p>
            <p><button @click="$store.dispatch('addA_Async')">addA_Async</button></p>
            <p><button @click="addA_Async">addA_Async</button></p>
        </div>
        <br>
        <router-link :to="{path:'/modules/a',query:{a:1}}">11111</router-link> |
        <router-link :to="{path:'/modules/a',query:{a:2}}">22222</router-link> |
        <router-link :to="{path:'/modules/a',query:{a:3}}">33333</router-link> |
        <router-link :to="{path:'/modules/a',query:{a:4}}">44444</router-link> |

    </div>
</template>

<script>
    import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';
    
    export default {
        name:"MdaView",
        computed: {
            ...mapState(["mdA"]),
            ...mapState({
                a:state=> state.mdA.a
            }),

            ...mapGetters(["doubleA"])
        },
        methods:{
            ...mapMutations(["addA"]),
            ...mapActions(["addA_Async"]),
        },
        beforeRouteUpdate(to, from, next) {
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 /detail/:id，在 /detail/1 和 /foo/2 之间跳转的时候，
            // 由于会渲染同样的 detail 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            // 可以访问组件实例 `this`
            console.log("路由跳转但是组件被复用->查看商品详情");
            console.log("from", from);
            console.log("to", to);
            next();
        },
    };

   
</script>

<style lang="scss" scoped>

</style>